<template>
  <div class="tree-select-box">
    <div class="tree-select" :style="'width:'+width" v-if="list.length > 0">
      <!-- 第一层 -->
      <div v-for="(one, oneNum) in list" :key="oneNum">
        <div class="tree-select-title">
          <i v-if="one.IsParent" :class="['iconfont', 'icon-down', 'tree-select-icon',one.childShow ? 'tree-select-activa' : '']" @click="getChild(1,oneNum)"></i>
          <i v-else class="iconfont icon-file tree-select-icon"></i>
          <a-tooltip placement="bottomLeft">
            <template slot="title">
            <span>{{one.Title}}</span>
            </template>
            <a-checkbox style="vertical-align: middle;" :indeterminate="one.indeterminate" :checked="one.selectUp" @change="onChangeOne(oneNum)" >{{ one.Title }}</a-checkbox>
          </a-tooltip>
          <!-- 第二层 -->
          <div class="tree-select" v-if="one.childShow">
            <div class="tree-select-title title-child" v-for="(two, twoNum) in one.child" :key="twoNum">
                <i v-if="two.IsParent" :class="['iconfont', 'icon-down', 'tree-select-icon',two.childShow ? 'tree-select-activa' : '']" @click="getChild(2,oneNum,twoNum)"></i>
                <i v-else class="iconfont icon-file tree-select-icon"></i>
                <a-tooltip placement="bottomLeft">
                    <template slot="title">
                    <span>{{two.Title}}</span>
                    </template>
                    <a-checkbox style="vertical-align: middle;" :indeterminate="two.indeterminate" :checked="two.selectUp" @change="onChangeTwo(oneNum, twoNum)">{{ two.Title }}</a-checkbox>
                </a-tooltip>
                <!-- 第三层 -->
                <div class="tree-select" v-if="two.childShow">
                  <div v-for="(three, threeNum) in two.child" :key="threeNum">
                    <div class="tree-select-title title-child" >
                        <i v-if="three.IsParent" :class="['iconfont', 'icon-down', 'tree-select-icon',three.childShow ? 'tree-select-activa' : '']" @click="getChild(3,oneNum,twoNum,threeNum)"></i>
                        <i v-else class="iconfont icon-file tree-select-icon"></i>
                        <a-tooltip placement="bottomLeft">
                            <template slot="title">
                            <span>{{three.Title}}</span>
                            </template>
                            <a-checkbox style="vertical-align: middle;" :indeterminate="three.indeterminate" :checked="three.selectUp" @change="onChangeThree(oneNum, twoNum, threeNum)">{{ three.Title }}</a-checkbox>
                        </a-tooltip>
                        <!-- 第四层 -->
                        <div class="tree-select" v-if="three.childShow">
                          <div v-for="(four, fourNum) in three.child" :key="fourNum">
                            <div class="tree-select-title title-child" >
                                <i v-if="four.IsParent" :class="['iconfont', 'icon-down', 'tree-select-icon',four.childShow ? 'tree-select-activa' : '']" @click="getChild(4,oneNum,twoNum,threeNum, fourNum)"></i>
                                <i v-else class="iconfont icon-file tree-select-icon"></i>
                                <a-tooltip placement="bottomLeft">
                                    <template slot="title">
                                    <span>{{four.Title}}</span>
                                    </template>
                                    <a-checkbox style="vertical-align: middle;" :indeterminate="four.indeterminate" :checked="four.selectUp" @change="onChangeFour(oneNum, twoNum, threeNum, fourNum)">{{ four.Title }}</a-checkbox>
                                </a-tooltip>
                                <!-- 第五层 -->
                                <div class="tree-select" v-if="four.childShow">
                                    <div v-for="(five, fiveNum) in four.child" :key="fiveNum">
                                        <div class="tree-select-title title-child" >
                                            <!-- <i v-if="five.IsParent" :class="['iconfont', 'icon-down', 'tree-select-icon',five.childShow ? 'tree-select-activa' : '']"></i> -->
                                            <!-- <i v-else class="iconfont icon-file tree-select-icon"></i> -->
                                            <i class="iconfont icon-file tree-select-icon"></i>
                                            <a-tooltip placement="bottomLeft">
                                                <template slot="title">
                                                <span>{{five.Title}}</span>
                                                </template>
                                                <a-checkbox style="vertical-align: middle;" :checked="five.selectUp" @change="onChangeFive(oneNum, twoNum, threeNum, fourNum, fiveNum)">{{ five.Title }}</a-checkbox>
                                            </a-tooltip>
                                        </div>
                                    </div>
                                </div>
                            </div>
                          </div>
                        </div>
                    </div>
                  </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="text-align: center;color: #a9a9a9;font-size: 16px;" v-else>暂无知识点</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    //   list: [],
      //设置 indeterminate 状态，只负责样式控制
      indeterminate: true,
      ids: [],
      setListShow: true
    };
  },
  props: {
    list: {
        type: Array,
        default: ()=>[]
    },
    know: {
        type: Array,
        default: ()=>[]
    },
    width: {
        type:String,
        default: '200px'
    },
    linkage: {
        type: Boolean,
        default: true
    }
  },
  mounted() {
    this.setList();
    this.$forceUpdate();
  },
  methods: {    
    setList() {
      // 第一层  
      this.list.forEach((one, oneNum) => {
        this.list[oneNum] = {
          ...one,
          childShow: false,
          selectUp: false,
          indeterminate: false,
        };
        // 第二层
        one.child.forEach((two, twoNum) => {
          this.list[oneNum].child[twoNum] = {
            ...two,
            childShow: false,
            selectUp: false,
            indeterminate: false,
          };
          // 第三层   
          two.child.forEach((three,threeNum) => {
              this.list[oneNum].child[twoNum].child[threeNum] = {
                ...three,
                childShow: false,
                selectUp: false,
                indeterminate: false,
              };
            // 第四层
            three.child.forEach((four,fourNum) => {
              this.list[oneNum].child[twoNum].child[threeNum].child[fourNum] = {
                ...four,
                childShow: false,
                selectUp: false,
                indeterminate: false,
              };
              // 第五层
              four.child.forEach((five,fiveNum) => {
                this.list[oneNum].child[twoNum].child[threeNum].child[fourNum].child[fiveNum] = {
                    ...five,
                    childShow: false,
                    selectUp: false,
                    indeterminate: false,
                };
              });
            });
          });
        });
      });
      this.setListShow = false;
      if (this.know.length > 0) {
        this.setListKnow();
      }
    },
    setListKnow() {
        // 遍历第一层
        for (let one = 0; one < this.list.length; one++) {         
            if (this.know.indexOf(this.list[one].Id) > -1) {
                this.list[one].selectUp = true;
            };
            this.getSelectData();
            // 遍历第二层
            for (let two = 0; two < this.list[one].child.length; two++) {
                if (this.know.indexOf(this.list[one].child[two].Id) > -1) {
                    this.list[one].child[two].selectUp = true;
                    this.list[one].childShow = true;
                    if (this.list[one].selectUp == false) {
                        this.list[one].indeterminate = true; 
                    }
                    if (this.list[one].selectUp == false) {
                        this.list[one].indeterminate = true; 
                    }
                };
                this.getSelectData();
                // 遍历第三层
                for (let three = 0; three < this.list[one].child[two].child.length; three++) {
                    if (this.know.indexOf(this.list[one].child[two].child[three].Id) > -1) {
                        this.list[one].child[two].child[three].selectUp = true;
                        this.list[one].childShow = true;
                        this.list[one].child[two].childShow = true;
                        if (this.list[one].selectUp == false) {
                            this.list[one].indeterminate = true; 
                        }
                        if (this.list[one].selectUp == false) {
                            this.list[one].indeterminate = true; 
                        }
                        if (this.list[one].child[two].selectUp == false) {
                            this.list[one].child[two].indeterminate = true; 
                        }
                    };
                    this.getSelectData();
                    // 遍历第四层
                    for (let four = 0; four < this.list[one].child[two].child[three].child.length; four++) {
                        if (this.know.indexOf(this.list[one].child[two].child[three].child[four].Id) > -1) {
                            this.list[one].child[two].child[three].child[four].selectUp = true;
                            this.list[one].childShow = true;
                            this.list[one].child[two].childShow = true;
                            this.list[one].child[two].child[three].childShow = true;
                            if (this.list[one].selectUp == false) {
                                this.list[one].indeterminate = true; 
                            }
                            if (this.list[one].selectUp == false) {
                                this.list[one].indeterminate = true; 
                            }
                            if (this.list[one].child[two].selectUp == false) {
                                this.list[one].child[two].indeterminate = true; 
                            }
                            if (this.list[one].child[two].child[three].selectUp == false) {
                                this.list[one].child[two].child[three].indeterminate = true; 
                            }
                        };
                        this.getSelectData();
                        // 遍历第五层
                        for (let five = 0; five < this.list[one].child[two].child[three].child[four].child.length; five++) {
                            if (this.know.indexOf(this.list[one].child[two].child[three].child[four].child[five].Id) > -1) {
                                this.list[one].child[two].child[three].child[four].child[five].selectUp = true;
                                this.list[one].childShow = true;
                                this.list[one].child[two].childShow = true;
                                this.list[one].child[two].child[three].childShow = true;
                                this.list[one].child[two].child[three].child[four].childShow = true;
                                if (this.list[one].selectUp == false) {
                                    this.list[one].indeterminate = true; 
                                }
                                if (this.list[one].selectUp == false) {
                                    this.list[one].indeterminate = true; 
                                }
                                if (this.list[one].child[two].selectUp == false) {
                                    this.list[one].child[two].indeterminate = true; 
                                }
                                if (this.list[one].child[two].child[three].selectUp == false) {
                                    this.list[one].child[two].child[three].indeterminate = true; 
                                }
                                if (this.list[one].child[two].child[three].child[four].selectUp == false) {
                                    this.list[one].child[two].child[three].child[four].indeterminate = true; 
                                }
                            };
                            this.getSelectData();
                        }
                    }
                }
            }
        };
        console.log(this.list);
        this.$forceUpdate();
    },
    getChild(type, one, two, three, four) {
        if (type == 1) {
            this.list[one].childShow = !this.list[one].childShow;
        } else if (type == 2) {
            this.list[one].child[two].childShow = !this.list[one].child[two].childShow;
        } else if (type == 3) {
            this.list[one].child[two].child[three].childShow = !this.list[one].child[two].child[three].childShow;
        } else {
            this.list[one].child[two].child[three].child[four].childShow = !this.list[one].child[two].child[three].child[four].childShow;
        };
        this.$forceUpdate();
    },
    // 设置子级状态
    setChildState(type,one,two,three,four,childShow) {
        if (type == 1) {// 设置第一层的子级
            for (let iTwo = 0; iTwo < this.list[one].child.length; iTwo++) {
                if (this.list[one].selectUp) {
                    this.list[one].child[iTwo].indeterminate = false;
                };
                this.list[one].child[iTwo].selectUp = this.list[one].selectUp;
                if (this.list[one].child[iTwo].IsParent) {
                    this.setChildState(2, one, iTwo);
                }
            }
        } else if (type == 2) {// 设置第二层的子级
            for (let iThree = 0; iThree < this.list[one].child[two].child.length; iThree++) {
                if (this.list[one].child[two].selectUp) {
                    this.list[one].child[two].child[iThree].indeterminate = false;
                };
                this.list[one].child[two].child[iThree].selectUp = this.list[one].child[two].selectUp;
                if (this.list[one].child[two].child[iThree].IsParent) {
                    this.setChildState(3, one, two, iThree);
                }
            }
        } else if (type == 3) {// 设置第三层的子级
            for (let iFour = 0; iFour < this.list[one].child[two].child[three].child.length; iFour++) {
                if (this.list[one].child[two].child[three].selectUp) {
                    this.list[one].child[two].child[three].child[iFour].indeterminate = false;
                };
                this.list[one].child[two].child[three].child[iFour].selectUp = this.list[one].child[two].child[three].selectUp;
                if (this.list[one].child[two].child[three].child[iFour].IsParent) {
                    this.setChildState(4, one, two, three, iFour,true)
                }
            }
        } else if (type == 4) {// 设置第四层的子级
            for (let iFive = 0; iFive < this.list[one].child[two].child[three].child[four].child.length; iFive++) {
                if (this.list[one].child[two].child[three].child[four].selectUp) {
                    this.list[one].child[two].child[three].child[four].child[iFive].indeterminate = false;
                };
                this.list[one].child[two].child[three].child[four].child[iFive].selectUp = this.list[one].child[two].child[three].child[four].selectUp;
            }
        }
    },
    
    // 设置父级级状态
    setParentState(type,one,two,three,four) {
        var trueNum = 0;
        var indeterminateNum = 0;
        var falseNum = 0;
        if (type == 1) {
            // 设置第二层的父级
            for (let iTwo = 0; iTwo < this.list[one].child.length; iTwo++) {
                if (this.list[one].child[iTwo].selectUp) {
                    trueNum++
                } else {
                    falseNum++
                };
                if (this.list[one].child[iTwo].indeterminate) {
                    indeterminateNum++
                };
            };
            if (trueNum > 0) {
                if (this.list[one].selectUp == false) {
                    this.list[one].indeterminate = true;
                };
            };
            if (falseNum == this.list[one].child.length) {
                if (this.list[one].selectUp == false) {
                    if (indeterminateNum > 0) {
                        this.list[one].indeterminate = true;
                    } else {
                        this.list[one].indeterminate = false;
                    };
                };
            };
        } else if(type == 2) {
            // 设置第三层的父级
            for (let iThree = 0; iThree < this.list[one].child[two].child.length; iThree++) {
                if (this.list[one].child[two].child[iThree].selectUp) {
                    trueNum++
                } else {
                    falseNum++
                };
                if (this.list[one].child[two].child[iThree].indeterminate) {
                    indeterminateNum++
                };
            };
            if (trueNum > 0) {
                if (this.list[one].child[two].selectUp == false) {
                    this.list[one].child[two].indeterminate = true;
                };
            };
            if (falseNum == this.list[one].child[two].child.length) {
                if (this.list[one].child[two].selectUp == false) {
                    if (indeterminateNum > 0) {
                        this.list[one].child[two].indeterminate = true;
                    } else {
                        this.list[one].child[two].indeterminate = false;
                    };
                };
            };
            this.setParentState(1,one,two);
        } else if (type == 3) {
            // 设置第四层的父级
            for (let iThree = 0; iThree < this.list[one].child[two].child[three].child.length; iThree++) {
                if (this.list[one].child[two].child[three].child[iThree].selectUp) {
                    trueNum++
                } else {
                    falseNum++;
                };
                if (this.list[one].child[two].child[three].child[iThree].indeterminate) {
                    indeterminateNum++
                };
            };
            if (trueNum > 0) {
                if (this.list[one].child[two].child[three].selectUp == false) {
                    this.list[one].child[two].child[three].indeterminate = true;
                };
            }
            if (falseNum == this.list[one].child[two].child[three].child.length) {
                if (this.list[one].child[two].child[three].selectUp == false) {
                    if (indeterminateNum > 0) {
                        this.list[one].child[two].child[three].indeterminate = true;
                    } else {
                        this.list[one].child[two].child[three].indeterminate = false;
                    };
                };
            };
            this.setParentState(2,one,two,three);
        } else if (type == 4) {
            // 设置第五层的父级
            for (let iFour = 0; iFour < this.list[one].child[two].child[three].child[four].child.length; iFour++) {
                if (this.list[one].child[two].child[three].child[four].child[iFour].selectUp) {
                    trueNum++
                } else {
                    falseNum++;
                };
                if (this.list[one].child[two].child[three].child[four].child[iFour].indeterminate) {
                    indeterminateNum++
                };
            };
            if (trueNum > 0) {
                if (this.list[one].child[two].child[three].child[four].selectUp == false) {
                    this.list[one].child[two].child[three].child[four].indeterminate = true;
                };
            }
            if (falseNum == this.list[one].child[two].child[three].child[four].child.length) {
                if (this.list[one].child[two].child[three].child[four].selectUp == false) {
                    if (indeterminateNum > 0) {
                        this.list[one].child[two].child[three].child[four].indeterminate = true;
                    } else {
                        this.list[one].child[two].child[three].child[four].indeterminate = false;
                    };
                };
            };
            this.setParentState(3,one,two,three,four);
        };
    },
    // 获取选中的数据
    getSelectData() {
        this.ids = [];
        this.list.forEach(one => {
            if (one.selectUp) {
                this.ids.push(one.Id);
            };
            one.child.forEach(two => {
                if (two.selectUp) {
                    this.ids.push(two.Id);
                };
                two.child.forEach(three => {
                    if (three.selectUp) {
                        this.ids.push(three.Id);
                    };
                    three.child.forEach(four => {
                        if (four.selectUp) {
                            this.ids.push(four.Id);
                        };
                        four.child.forEach(five => {
                            if (five.selectUp) {
                                this.ids.push(five.Id);
                            }
                        });
                    });
                });
            });
        });
        console.log(this.ids);
        this.$emit('change');
    },
    // 第一层 选中事件
    onChangeOne(one) {
        this.list[one].indeterminate = false;
        this.list[one].selectUp = !this.list[one].selectUp;
        // 设置当前子级状态
        if (this.list[one].IsParent && this.linkage) {
            this.setChildState(1, one)
        };
        setTimeout(() => {
            this.getSelectData();
        }, 200);
        this.$forceUpdate();
    },
    // 第二层 选中事件
    onChangeTwo(one, two) {
      this.list[one].child[two].indeterminate = false;
      this.list[one].child[two].selectUp = !this.list[one].child[two].selectUp;
      // 设置当前父级状态
      this.setParentState(1,one,two);
      // 设置当前子级状态
      if (this.list[one].child[two].IsParent && this.linkage) {
        this.setChildState(2, one, two);
      };
      setTimeout(() => {
        this.getSelectData();
      }, 200);
      this.$forceUpdate();
    },
    // 第三层 选中事件
    onChangeThree(one, two, three) {
        this.list[one].child[two].child[three].indeterminate = false;
        this.list[one].child[two].child[three].selectUp = !this.list[one].child[two].child[three].selectUp;
        // 设置当前父级状态
        this.setParentState(2, one, two, three);
        // 设置当前子级状态
        if (this.list[one].child[two].child[three].IsParent && this.linkage) {
            this.setChildState(3, one, two, three)
        };
        setTimeout(() => {
            this.getSelectData();
        }, 200);
        this.$forceUpdate();
    },
    // 第四层 选中事件
    onChangeFour(one, two, three, four) {
        this.list[one].child[two].child[three].child[four].indeterminate = false;
        this.list[one].child[two].child[three].child[four].selectUp = !this.list[one].child[two].child[three].child[four].selectUp;
        // 设置当前父级状态
        this.setParentState(3, one, two, three,four);
        // 设置当前子级状态
        if (this.list[one].child[two].child[three].child[four].IsParent && this.linkage) {
            this.setChildState(4, one, two, three, four);
        }
        setTimeout(() => {
            this.getSelectData();
        }, 200);
        this.$forceUpdate();
    },
    onChangeFive(one, two, three, four, five) {
        this.list[one].child[two].child[three].child[four].child[five].selectUp = !this.list[one].child[two].child[three].child[four].child[five].selectUp;
        // 设置当前父级状态
        this.setParentState(4, one, two, three, four);
        setTimeout(() => {
            this.getSelectData();
        }, 200);
        this.$forceUpdate();
    }
  },
};
</script>

<style lang="scss">
.tree-select-box{
    .tree-select-title {
        margin: 5px 0px;
        .ant-checkbox-wrapper {
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            width: calc(100% - 27px);
        }
        .icon-down{
            cursor: pointer;
            transform:rotate(-90deg);
            transition: all 0.3s;
        }
        .tree-select-icon{
            vertical-align: middle;
            padding: 0px 5px;
            display: inline-block;
        }
        .tree-select-activa{
            vertical-align: middle;
            transform:rotate(0deg);
            transition: all 0.3s;
        }
    }
    .title-child {
        margin-left: 20px;
    }
    .tree-select-icon:hover {
        color: #1890ff;
    }
}

</style>